<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .search  .layui-input-block{
            border: 1px solid #eee;
        }
        .div_td{
            display: flex;
        }
        .div_td div{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .div_label{
            width: 100px;
            padding: 9px 15px;
            background-color: #FBFBFB
        }
        .layui-table td, .layui-table th{
            padding: 0px;
        }
        .label_td{
            width: 50px;
            background-color: #FBFBFB
        }
        .pane_info .layui-form-item{
            margin-bottom:0px
        }
        .pane_info .layui-form .layui-table td, .layui-table th{
            padding: 4px 4px
        }
        ._button_center{
            display: flex;
            align-items: center;
        }
        ._button_center button{
            margin-left: 10px;
            background-color: #1E9FFF;
        }
        .info-pane td{
            padding: 0;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane search" lay-filter="search-lay-filter-data" action="" >
                    <div class="layui-form-item">
                        <a id="LAY_lay_search-form"></a>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
        <div id="demo_page"></div>
        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-primary layui-btn-xs " lay-event="detail">详情</a>
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>

    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        {{#  if(d.isAdd){ }}
        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
        {{#  } }}
        {{#  if(d.isDel){ }}
        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
        {{#  } }}
    </div>
</script>
<script type="text/html" id="data_search">
    {{#  layui.each(d.searchList, function(index, item){ }}
    <div class="layui-inline" pane="" >
        <label class="layui-form-label">{{ item.label }}</label>
        {{#  if(item.component ==='input'){ }}
        <div class="layui-input-inline">
            <input type="text" name="{{ item.name }}" autocomplete="off" class="layui-input">
        </div>
        {{#  }else if(item.component ==='select'){ }}
        <div class="layui-input-inline">
            <select name="{{ item.name }}" lay-filter="{{ item.name }}" {{ item.isSearch ? 'lay-search=""' : ''}}>
            <option value="">{{ item.placeholder?item.placeholder:'请选择' }}</option>
            {{#  layui.each(item.list, function(n, o){ }}
            {{#  if(item.value){ }}
            <option value="{{o.value}}"  {{ o.value==item.value ? 'selected' : '' }} >{{ o.label}}</option>
            {{#  }else{ }}
            <option value="{{o.value}}">{{ o.label}}</option>
            {{#  } }}
            {{#  }); }}
            </select>
        </div>
        {{#  }else if(item.component ==='radio'){ }}
        <div class="layui-input-block">
            {{#  layui.each(item.list, function(n, o){ }}
            {{#  if(item.value){ }}
            <input type="radio" lay-filter="{{ item.name }}" name="{{ item.name }}" value="{{o.value }}" title="{{ o.label }}" {{ o.value == item.value ? 'checked' : '' }}>
            {{#  }else{ }}
            <input type="radio" lay-filter="{{ item.name }}" name="{{ item.name }}" value="{{ o.value }}" title="{{ o.label }}">
            {{#  } }}
            {{#  }); }}
        </div>
        {{#  }else if(item.component ==='date'){ }}
        <div class="layui-input-inline">
            <input type="text" name="{{ item.name }}" id="date_search_{{ item.name }}" placeholder="{{ item.placeholder}}" value="{{ item.value ? item.value : '' }}"   class="layui-input">
        </div>
        {{#  } }}
    </div>
    {{#  }); }}
</script>
<!--数据操作-->
<script type="text/html" id="data_operation">
    <div class="pane_info">
        {{#  if(!d.edit){ }}
        <table class="layui-table info-pane">
            <tbody>
                {{#  layui.each(d.list, function(index, item){ }}
                <tr>
                    {{#  layui.each(item.model, function(i, e){ }}
                    <td colspan="{{ item.colspan }}" >
                        <div class="div_td">
                            <div class="div_label">
                                {{ e.label }}
                            </div>
                            <div>
                                {{#  if(e.component ==='select'){ }}
                                    {{#  layui.each(e.list, function(n, o){ }}
                                        {{#  if(o.value==e.value){ }}
                                            {{ o.label }}
                                        {{#  } }}
                                    {{#  }); }}
                                {{#  }else if(e.component ==='radio'){ }}
                                    {{#  layui.each(e.list, function(n, o){ }}
                                        {{#  if(o.value==e.value){ }}
                                            {{ o.label }}
                                        {{#  } }}
                                    {{#  }); }}
                                {{#  }else if(e.component ==='checkbox'){ }}
                                    {{#  layui.each(e.list, function(n, o){ }}
                                        {{#  if(e.valueList){ }}
                                            {{#  if(e.valueList.includes(o.value)){ }}
                                                {{ o.label }}
                                                {{#  if((e.list.length-1)!==n){ }} , {{#  } }}
                                            {{#  } }}
                                        {{#  } }}
                                    {{#  }); }}
                                {{#  }else{ }}
                                    {{ e.value }}
                                {{#  } }}
                            </div>
                        </div>
                    </td>
                    {{#  }); }}
                </tr>
            {{#  }); }}
            </tbody>
        </table>
        {{#  }else{ }}
        <form class="layui-form layui-form-pane" action="" lay-filter="demo-lay-filter-datainfo">
            {{#  if(d.dataId){ }}
            <input type="hidden"  name="dataId" value="{{d.dataId}}" >
            {{#  } }}
            <table class="layui-table info-pane">
                <tbody>
                {{#  layui.each(d.list, function(index, item){ }}
                <tr>
                    {{#  layui.each(item.model, function(i, e){ }}
                    <td colspan="{{ item.colspan }}">
                        {{#  if(e.component ==='input'){ }}
                        <div class="layui-form-item">
                            <label class="layui-form-label">{{ e.label }}</label>
                            <div class="layui-input-block">
                                <input type="text"  name="{{ e.name }}" id="pane_form_{{e.name}}" autocomplete="off" class="layui-input" placeholder="{{ e.placeholder}}" value="{{ e.value ? e.value : '' }}"  {{ e.required ? 'lay-verify="required"' : '' }}>
                            </div>
                        </div>
                        {{#  }else if(e.component ==='date'){ }}
                        <div class="layui-form-item">
                            <label class="layui-form-label">{{ e.label }}</label>
                            <div class="layui-input-block">
                                <input type="text" name="{{ e.name }}" id="date_{{ e.name }}" placeholder="{{ e.placeholder}}" value="{{ e.value ? e.value : '' }}"   {{ e.required ? 'lay-verify="required"' : '' }} autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        {{#  }else if(e.component ==='datetime'){ }}
                        <div class="layui-form-item">
                            <label class="layui-form-label">{{ e.label }}</label>
                            <div class="layui-input-block">
                                <input type="text" name="{{ e.name }}" id="date_{{ e.name }}" placeholder="{{ e.placeholder}}" value="{{ e.value ? e.value : '' }}"   {{ e.required ? 'lay-verify="required"' : '' }} autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        {{#  }else if(e.component ==='textarea'){ }}
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">{{ e.label }}</label>
                            <div class="layui-input-block">
                                <textarea placeholder="请输入内容" id="pane_form_{{e.name}}"  name="{{ e.name }}" class="layui-textarea"  >{{e.value ? e.value :''}}</textarea>
                            </div>
                        </div>
                        {{#  }else if(e.component ==='select'){ }}
                        <div class="layui-form-item">
                            <label class="layui-form-label">{{ e.label }}</label>
                            <div class="layui-input-block">
                                <select name="{{ e.name }}" lay-filter="{{ e.name }}" {{ e.isSearch ? 'lay-search=""' : ''}}>
                                <option value="">{{ e.placeholder?e.placeholder:'请选择' }}</option>
                                {{#  layui.each(e.list, function(n, o){ }}
                                {{#  if(e.value){ }}
                                <option value="{{o.value}}"  {{ o.value==e.value ? 'selected' : '' }} >{{ o.label}}</option>
                                {{#  }else{ }}
                                <option value="{{o.value}}">{{ o.label}}</option>
                                {{#  } }}
                                {{#  }); }}
                                </select>
                            </div>
                        </div>
                        {{#  }else if(e.component ==='radio'){ }}
                        <div class="layui-form-item" pane="">
                            <label class="layui-form-label">{{ e.label }}</label>
                            <div class="layui-input-block">
                                {{#  layui.each(e.list, function(n, o){ }}
                                {{#  if(e.value){ }}
                                <input type="radio" lay-filter="{{ e.name }}" name="{{ e.name }}" value="{{o.value }}" title="{{ o.label }}" {{ o.value == e.value ? 'checked' : '' }}>
                                {{#  }else{ }}
                                <input type="radio" lay-filter="{{ e.name }}" name="{{ e.name }}" value="{{ o.value }}" title="{{ o.label }}">
                                {{#  } }}
                                {{#  }); }}
                            </div>
                        </div>
                        {{#  }else if(e.component=='checkbox'){  }}
                        <div class="layui-form-item" pane="">
                            <label class="layui-form-label">{{ e.label }}</label>
                            <div class="layui-input-block">
                                {{#  layui.each(e.list, function(n, o){ }}
                                {{#  if(e.valueList){ }}
                                <input lay-skin="primary" type="checkbox" lay-filter="{{ o.value }}" name="{{ o.value }}" title="{{ o.label }}" {{ e.valueList.includes(o.value) ? 'checked' : '' }}>
                                {{#  }else{ }}
                                <input lay-skin="primary" type="checkbox" lay-filter="{{ o.value }}" name="{{ o.value }}" title="{{ o.label }}" >
                                {{#  } }}
                                {{#  }); }}
                            </div>
                        </div>
                        {{#  }else if(e.component=='switch'){ }}
                        <div class="layui-form-item" pane="">
                            <label class="layui-form-label">{{ e.label }}</label>
                            <div class="layui-input-block">
                                <input type="checkbox" {{e.value ? 'checked' : '' }} name="{{ e.name }}" lay-filter="{{ e.name }}" lay-skin="switch" lay-text="{{ e.labelText ? e.labelText : 'ON|OFF'}}">
                            </div>
                        </div>
                        {{#  }else if(e.component=='upload'){ }}
                        <div class="layui-form-item" pane="">
                            <label class="layui-form-label">{{ e.label }}</label>
                            <div class="layui-input-block _button_center">
                                <button type="button" id="upload_file_{{e.name}}" class="layui-btn demo-class-accept layui-btn-sm" lay-options="{accept: 'file'}">
                                    <i class="layui-icon layui-icon-upload"></i>
                                    上传文件
                                </button>
                                <a id="file_url_{{e.name}}" target="_blank"></a>
                            </div>
                        </div>
                        {{#  } }}
                    </td>
                    {{#  }); }}
                </tr>
                {{#  }); }}
                </tbody>
            </table>
        </form>
        {{#  } }}
    </div>
</script>


<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/jquery-3.7.1.min.js"></script>
<script src="../js/crypto-js.min.js"></script>
<script src="../js/common.js"></script>
<script src="/lay/t-secrypt-script.js"></script>
<script>

    layui.use(['form', 'table','laytpl','laydate','upload','laypage'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
        var upload = layui.upload;
        var laydate = layui.laydate;
        var laypage = layui.laypage;
        var laytpl = layui.laytpl; //模版
        let scriptJs='/lay/secrypt-script.js';
        let tableUrl='/test/testpageencrtpy';
        let saveOrUpdateUrl = "/test/testsave";
        let deleteDataUrl = "";
        let id = "id";
        let name = "name"
        let cacheMap = {};

        //模版显示按钮
        let tooBarModel = {
            isAdd:true,
            isDel:false
        };

        let searchFormList = [
            {label: '输入框', component: 'input', name: 'input'},
            {label: '时间', component: 'date', name: 'date', placeholder: "请选择时间"},
            {label: '单选框', component: 'radio', name: 'radio', url: '/test/testlabel'},
            {label: '选择框', component: 'select', name: 'select', url: '/test/testlabel'}
        ]

        let formList = [
            {
                model: [
                    {
                        label: '输入框',
                        component: 'input',
                        name: 'input',
                        placeholder: "请输入数据",
                        required: true,
                        requiredMsg: '接口名称必填',
                        value: "填写的值"
                    },
                ], colspan: 2
            },
            {
                model: [
                    {
                        label: '输入框1',
                        component: 'input',
                        name: 'input1',
                        placeholder: "请输入数据",
                        required: true,
                        requiredMsg: '接口名称必填',
                        value: "填写的值"
                    },
                    {
                        label: '输入框2',
                        component: 'input',
                        name: 'input2',
                        placeholder: "请输入数据",
                        required: true,
                        requiredMsg: '接口名称必填',
                        value: "填写的值"
                    },
                ], colspan: 1
            },
            {
                model: [
                    {
                        label: '日期',
                        component: 'date',
                        name: 'date',
                        placeholder: "请选择日期",
                        required: true,
                        requiredMsg: '日期必填',
                        value: "2025-02-25"
                    },
                ], colspan: 2
            },
            {
                model: [
                    {
                        label: '下拉框',
                        component: 'select',
                        name: 'select',
                        placeholder: "请选择数据",
                        required: true,
                        requiredMsg: '',
                        value: 'value_02',
                        url: '/test/testlabel',
                        isSearch: true
                    },
                ], colspan: 2
            },
            {
                model: [
                    {
                        label: '单选框',
                        component: 'radio',
                        name: 'radio',
                        required: true,
                        requiredMsg: '名字必填',
                        value: 'value_01',
                        url: '/test/testlabel'
                    },
                ], colspan: 2
            },
            {
                model: [
                    {
                        label: '复选框',
                        component: 'checkbox',
                        name: 'checkbox',
                        placeholder: "请选择",
                        required: true,
                        requiredMsg: '名字必填',
                        valueList: ['value_01', 'value_02'],
                        url: '/test/testlabel'
                    },
                ], colspan: 2
            },
            {
                model: [
                    {
                        label: '开关',
                        component: 'switch',
                        name: 'switch',
                        required: true,
                        requiredMsg: '名字必填',
                        labelText: "YES|NO",
                        value: true,
                        url: '/test/testlabel'
                    },
                ], colspan: 2
            },
            {
                model: [
                    {
                        label: '日期时间',
                        component: 'datetime',
                        name: 'datetime',
                        placeholder: "请选择日期时间",
                        required: true,
                        requiredMsg: '日期时间必填',
                        value: ''
                    },
                ], colspan: 2
            },
            {
                model: [
                    {
                        label: '文件上传',
                        component: 'upload',
                        name: 'upload',
                        required: true,
                        requiredMsg: '接口名称必填',
                        value: "",
                        url: "/sys-file/upload"
                    },
                ], colspan: 2
            },
            {
                model: [
                    {
                        label: '富文本',
                        component: 'textarea',
                        name: 'textarea',
                        required: true,
                        requiredMsg: '名字必填',
                        value: 'value_01'
                    },
                ], colspan: 2
            },
        ]
        //渲染表单组件
        formSearchRender();
        //首次加密数据
        reloadScript(scriptJs,function (){
            let obj={curr:1,limit:10};
            loadTable(obj);
        });
        //加载表格数据
        function loadTable(obj){
            let json = form.val('search-lay-filter-data');
            let reqData={pageNum:obj.curr,pageSize:obj.limit,search:json};
            secrypt_mode.encryptFormData(tableUrl,reqData,function (res){
                table.reload('currentTableId', {
                    data: res.data.data
                });
                pageRender(obj.curr,res.data.count,function (o){
                    loadTable(o);
                });
            })
        }
        //分页渲染(同时会自动加载新的加密模块脚本)
        function pageRender(curr,total,callback){
            laypage.render({
                elem: 'demo_page' //注意，这里的 test1 是 ID，不用加 # 号
                ,count: total //数据总数，从服务端得到
                ,curr: curr
                ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                ,theme: '#4e6ef2'
                ,jump: function(obj,first){
                    if(!first){
                        callback(obj);
                    }
                    reloadScript(scriptJs,function (){});
                }
            });
        }
        //更新按钮渲染
        toolbarRender('toolbarDemo');
        table.render({
            elem: '#currentTableId',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'id', width: 80, title: 'ID', sort: true},
                {field: 'input', width: 180, title: '输入框'},
                {field: 'select', width: 180, title: '下拉框', sort: true},
                {field: 'textarea', width: 180, title: '富文本'},
                {field: 'radio', width: 180, title: '单选框'},
                {field: 'checkbox', width: 180, title: '父选框'},
                {field: 'datetime', width: 180, title: '日期时间'},
                {title: '操作', fixed: 'right', minWidth: 200, toolbar: '#currentTableBar', align: "center"}
            ]],
            page: false,
            skin: 'line'
        });
        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            let obj={curr:1,limit:10};
            loadTable(obj);
            return false;
        });
        /**
         * toolbar监听事件
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                let initData = {};
                initData.list = formList;
                setFormEmptyValue();
                add(initData);
            } else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus('currentTableId')
                    , data = checkStatus.data;
                if (data.length == 0) {
                    return layer.msg('未选择数据', {icon: 0});
                }
                let arr = [];
                for (let i = 0; i < data.length; i++) {
                    let o = data[i];
                    arr.push(o[id] + '');
                }
                layer.confirm('确认删除选中数据吗', function (index) {
                    layer.close(index);
                    del(arr);
                })
            }
        });
        function reloadScript(src,callback) {
            // 找到所有 script 标签
            const scripts = document.querySelectorAll('script');
            scripts.forEach(script => {
                // 找到指定 src 的脚本
                if (script.src === src) {
                    // 移除旧的脚本
                    script.remove();
                }
            });
            // 重新加载脚本
            loadScript(src, function() {
                console.log('脚本重新加载完成！');
                callback()
            });
        }
        function loadScript(src, callback) {
            const script = document.createElement('script');
            script.src = src;
            script.type = 'text/javascript';
            script.onload = callback; // 脚本加载完成后执行回调
            document.head.appendChild(script);
        }
        function toolbarRender(id){
            var getTpl = $('#' + id).html();
            laytpl(getTpl).render(tooBarModel, function (html) {
                $('#'+id).html(html); // 重新设置工具栏的 HTML
            });
        }
        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });
        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                setFormEmptyValue();
                setFormValue(data);
                data.list = formList;
                update(data);
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('确认删除【' + data[name] + '】吗', function (index) {
                    layer.close(index);
                    let arr = [];
                    arr.push(data[id] + '')
                    del(arr);
                });
            } else if (obj.event === 'detail') {
                let detailObj = {};
                detailObj.list = formList;
                setFormEmptyValue();
                setFormValue(data);
                detail(detailObj);
                return false;
            }
        });


        function add(data) {
            data.edit = true;
            templateRender('data_operation', data, function (html) {
                layerPage('添加操作', html, data, '50%', '70%', function (index) {
                    let json = form.val('demo-lay-filter-datainfo');
                    getFromValue(json);
                    secrypt_mode.encryptFormData(saveOrUpdateUrl,json,function (res){
                        if (res.code == 200) {
                            layer.msg(res.message, {icon: 1}, function () {
                            });
                            layer.close(index);
                            table.reload('currentTableId');
                        } else {
                            layer.msg(res.message, {icon: 2});
                        }
                    });
                    reloadScript(scriptJs,function (){});
                })
                formRender();
            })
        }

        function detail(data) {
            data.edit = false;
            templateRender('data_operation', data, function (html) {
                layerDetailPage('查看详情', html, data, '50%', '70%')
            })
        }

        function update(data) {
            data.edit = true;
            data.dataId = data[id];
            templateRender('data_operation', data, function (html) {
                layerPage('修改操作', html, data, '50%', '70%', function (index) {
                    let json = form.val('demo-lay-filter-datainfo');
                    json[id] = json.dataId;
                    delete json.dataId;
                    getFromValue(json);
                    secrypt_mode.encryptFormData(saveOrUpdateUrl,json,function (res){
                        if (res.code == 200) {
                            layer.msg(res.message, {icon: 1}, function () {
                            });
                            layer.close(index);
                            table.reload('currentTableId');
                        } else {
                            layer.msg(res.message, {icon: 2});
                        }
                    })
                    reloadScript(scriptJs,function (){});
                })
                formRender();
            })
        }

        function del(ids) {
            let idData = {ids: ids};
            layutils.ajaxJsonPost(deleteDataUrl, JSON.stringify(idData), function (res) {
                if (res.code == 200) {
                    layer.msg(res.message, {icon: 1});
                    table.reload('currentTableId');
                } else {
                    layer.msg(res.message, {icon: 2});
                }
            });
        }
        //监听事件
        function formChangeEvent(component, name, value) {
            console.log(name + " name " + " value " + JSON.stringify(value));
        }
        //设置空值
        function setFormEmptyValue() {
            formList.forEach(function (item, index) {
                item.model.forEach(function (o, i) {
                    if (o.component === 'checkbox') {
                        o.valueList = [];
                    } else if (o.component === 'switch') {
                        o.value = false;
                    } else {
                        o.value = '';
                    }
                })
            })
        }

        //优化设置值
        function setFormValue(obj) {
            formList.forEach(function (item, index) {
                item.model.forEach(function (o, i) {
                    if (obj[o.name]) {
                        if (o.component === 'checkbox') {
                            o.valueList = obj[o.name];
                        } else {
                            o.value = obj[o.name];
                        }
                    }
                })
            })
        }

        //优化复选框
        function getFromValue(obj) {
            formList.forEach(function (item, index) {
                item.model.forEach(function (o, i) {
                    if (o.component === 'checkbox') {
                        obj[o.name] = o.valueList;
                    } else if (o.component === 'switch') {
                        obj[o.name] = o.value;
                    } else if (o.component === 'upload') {
                        obj[o.name] = o.value;
                    }
                })
            })
            for (let key in obj) {
                if (obj[key] === 'on') {
                    delete obj[key];
                }
                if (key === 'file') {
                    delete obj[key];
                }
            }
        }

        //搜索表单渲染
        function formSearchRender() {
            let data = {};
            data.searchList = searchFormList;
            searchFormList.forEach(function (item, index) {
                if (item.component === 'select') {
                    item.list = layutils.addKeyIfNotExists(cacheMap, item.url, function (key) {
                        let data = layutils.ajaxGetAwait(item.url, null);
                        return data.data;
                    })
                } else if (item.component === 'radio') {
                    item.list = layutils.addKeyIfNotExists(cacheMap, item.url, function (key) {
                        let data = layutils.ajaxGetAwait(item.url, null);
                        return data.data;
                    })
                }
            })
            templateRender('data_search', data, function (html) {
                $("#LAY_lay_search-form").html(html);
                form.render();
                searchFormList.forEach(function (item, index) {
                    if (item.component === 'date') {
                        laydate.render({
                            elem: '#date_search_' + item.name,
                            done: function (value, date, endDate) {
                                item.value = value;
                            }
                        });
                    }
                })
            })
        }
        //模板渲染
        function templateRender(templateId, data, callback) {
            var getTpl = $('#' + templateId).html();
            if (data.list) {
                data.list.forEach(function (item, index) {
                    item.model.forEach(function (e, i) {
                        if (e.component === 'select') {
                            e.list = layutils.addKeyIfNotExists(cacheMap, e.url, function (key) {
                                let data = layutils.ajaxGetAwait(e.url, null);
                                return data.data;
                            })
                            form.on('select(' + e.name + ')', function (data) {
                                e.value = data.value;
                                formChangeEvent('select', e.name, data.value);
                            })
                        } else if (e.component === 'switch') {
                            form.on('switch(' + e.name + ')', function (data) {
                                e.value = data.elem.checked;
                                formChangeEvent('switch', e.name, data.elem.checked);
                            });
                        } else if (e.component === 'radio') {
                            e.list = layutils.addKeyIfNotExists(cacheMap, e.url, function (key) {
                                let data = layutils.ajaxGetAwait(e.url, null);
                                return data.data;
                            })
                            // 监听单选按钮的改变事件
                            form.on('radio(' + e.name + ')', function (data) {
                                e.value = data.value;
                                formChangeEvent('radio', e.name, data.value);
                            });
                        } else if (e.component === 'checkbox') {
                            e.list = layutils.addKeyIfNotExists(cacheMap, e.url, function (key) {
                                let data = layutils.ajaxGetAwait(e.url, null);
                                return data.data;
                            })
                            e.list.forEach(function (m, n) {
                                form.on('checkbox(' + m.value + ')', function (data) {
                                    if (data.elem.checked) {
                                        const index = e.valueList.indexOf(m.value);
                                        if (index === -1) {
                                            e.valueList.push(m.value);
                                        }
                                    } else {
                                        const index = e.valueList.indexOf(m.value);
                                        if (index !== -1) {
                                            e.valueList.splice(index, 1); // 从索引位置移除 1 个元素
                                        }
                                    }
                                    formChangeEvent('checkbox', e.name, e.valueList);
                                })
                            })
                        }
                    })
                })
            }
            laytpl(getTpl).render(data, function (html) {
                callback(html);
            });
        }

        function formRender() {
            form.render();
            formList.forEach(function (item, index) {
                item.model.forEach(function (o, i) {
                    if (o.component === 'input') {
                        let id = 'pane_form_' + o.name;
                        $('#' + id).on('change', function () {
                            o.value = this.value;
                            formChangeEvent('input', o.name, this.value);
                        });
                    } else if (o.component === 'textarea') {
                        let id = 'pane_form_' + o.name;
                        $('#' + id).on('change', function () {
                            o.value = this.value;
                            formChangeEvent('textarea', o.name, this.value);
                        });
                    } else if (o.component === 'date') {
                        laydate.render({
                            elem: '#date_' + o.name,
                            done: function (value, date, endDate) {
                                o.value = value;
                                formChangeEvent('date', o.name, value);
                            }
                        });
                    } else if (o.component === 'datetime') {
                        laydate.render({
                            elem: '#date_' + o.name,
                            type: 'datetime',
                            done: function (value, date, endDate) {
                                o.value = value;
                                formChangeEvent('date', o.name, value);
                            }
                        });
                    } else if (o.component === 'upload') {
                        // 渲染
                        upload.render({
                            elem: '#upload_file_' + o.name, // 绑定多个元素
                            url: o.url, // 此处配置你自己的上传接口即可
                            accept: 'file', // 普通文件
                            done: function (res) {
                                o.value = res.data.id;
                                let fileUrlId = "file_url_" + o.name;
                                let dom = $("#" + fileUrlId);
                                dom.text(res.data.filename);
                                dom.attr('href', res.data.url);
                                formChangeEvent('upload', o.name, res);
                                layer.msg('上传成功');
                                console.log(res);
                            }
                        });
                    }
                })
            })
        }
        function layerDetailPage(title, html, data, width, height) {
            let index = layer.open({
                type: 1
                , title: title
                , maxmin: true
                , area: [width, height]
                , content: html
                , yes: function () {
                    callback(index);
                }
                , btn2: function () {
                    layer.close(index);
                }
            });
            return index;
        }

        //操作弹窗，充满整页
        function layerFullPage(title, html, data, callback) {
            let index = layer.open({
                type: 1
                , title: title
                , shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: ['100%', '100%']
                , content: html
                , btn: ['确认', '取消']
                , yes: function () {
                    callback(index);
                }
                , btn2: function () {
                    layer.close(index);
                }
            });
        }
        //操作弹窗
        function layerPage(title, html, data, width, height, callback) {
            let index = layer.open({
                type: 1
                , title: title
                , maxmin: true
                , area: [width, height]
                , content: html
                , btn: ['确认', '取消']
                , yes: function () {
                    callback(index);
                }
                , btn2: function () {
                    layer.close(index);
                }
            });
        }

        function addClickById(id, callback) {
            let id_ = '#' + id;
            $(id_).click(function (e) {
                callback(e);
            });
        }

        //操作弹窗，充满整页
        function layerFullPage(title, html, data, callback) {
            let index = layer.open({
                type: 1
                , title: title
                , shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: ['100%', '100%']
                , content: html
                , btn: ['确认', '取消']
                , yes: function () {
                    callback(index);
                }
                , btn2: function () {
                    layer.close(index);
                }
            });
        }
    });
</script>
</body>
</html>